<ion-view left-buttons="leftButtons"
          class="settings">
  <ion-nav-title translate>ES_SETTINGS.PLUGIN_NAME</ion-nav-title>

  <ion-content scroll="true">

    <div class="item item-toggle dark">
      <div class="input-label" translate>ES_SETTINGS.ENABLE_TOGGLE</div>
      <label class="toggle toggle-royal">
        <input type="checkbox" ng-model="formData.enable" >
        <div class="track">
          <div class="handle"></div>
        </div>
      </label>
    </div>

    <div class="item item-toggle dark">
      <div ng-class="{'gray': !formData.enable}" class="input-label" translate>ES_SETTINGS.ENABLE_REMOTE_STORAGE</div>
      <h4 class="gray" ng-bind-html="'ES_SETTINGS.ENABLE_REMOTE_STORAGE_HELP' | translate"></h4>
      <label class="toggle toggle-royal">
        <input type="checkbox" ng-model="formData.useRemoteStorage" ng-disabled="!formData.enable">
        <div class="track">
          <div class="handle"></div>
        </div>
      </label>
    </div>

    <span class="item item-divider" translate>SETTINGS.NETWORK_SETTINGS</span>

    <div class="item ink" ng-click="formData.enable && changeEsNode()" ng-disabled="!formData.enable">
      <div class="input-label" ng-class="{'gray': !formData.enable}">
      {{'ES_SETTINGS.PEER' | translate}}
      </div>

      <!-- node fallback node -->
      <ng-if ng-if="isFallbackNode">
        <h4 class="gray text-wrap assertive" >
          <i class="icon ion-alert-circled"></i>
          <span ng-bind-html="'SETTINGS.PEER_CHANGED_TEMPORARY' | translate "></span>
        </h4>
        <div class="item-note assertive text-italic">{{server}}</div>
      </ng-if>

      <span ng-if="!isFallbackNode" class="item-note" ng-class="{'dark': formData.enable}">{{server}}</span>
    </div>

    <span class="item item-divider" translate>ES_SETTINGS.NOTIFICATIONS.DIVIDER</span>

    <!-- Enable HTML notifications -->
    <div class="item item-toggle dark hidden-xs hidden-sm">
      <div ng-class="{'gray': !formData.enable}" class="input-label" translate>ES_SETTINGS.NOTIFICATIONS.ENABLE_HTML5_NOTIFICATION</div>
      <h4 class="gray" ng-bind-html="'ES_SETTINGS.NOTIFICATIONS.ENABLE_HTML5_NOTIFICATION_HELP' | translate"></h4>
      <label class="toggle toggle-royal">
        <input type="checkbox" ng-model="formData.notifications.emitHtml5"  ng-disabled="!formData.enable">
        <div class="track">
          <div class="handle"></div>
        </div>
      </label>
    </div>

    <span class="item gray item-text-wrap" translate>ES_SETTINGS.NOTIFICATIONS.HELP_TEXT</span>

    <label class="item item-toggle dark item-text-wrap">
      <span ng-class="{'gray': !formData.enable}" translate>ES_SETTINGS.NOTIFICATIONS.ENABLE_TX_SENT</span>
      <div class="toggle toggle-royal">
        <input type="checkbox" ng-model="formData.notifications.txSent" ng-disabled="!formData.enable">
        <div class="track">
          <div class="handle"></div>
        </div>
      </div>
    </label>
    <label class="item item-toggle dark item-text-wrap">
      <span ng-class="{'gray': !formData.enable}" translate>ES_SETTINGS.NOTIFICATIONS.ENABLE_TX_RECEIVED</span>
      <label class="toggle toggle-royal">
        <input type="checkbox" ng-model="formData.notifications.txReceived" ng-disabled="!formData.enable">
        <div class="track">
          <div class="handle"></div>
        </div>
      </label>
    </label>
    <label class="item item-toggle dark item-text-wrap">
      <span ng-class="{'gray': !formData.enable}" translate>ES_SETTINGS.NOTIFICATIONS.ENABLE_CERT_SENT</span>
      <div class="toggle toggle-royal">
        <input type="checkbox" ng-model="formData.notifications.certSent" ng-disabled="!formData.enable">
        <div class="track">
          <div class="handle"></div>
        </div>
      </div>
    </label>
    <label class="item item-toggle dark item-text-wrap">
      <span ng-class="{'gray': !formData.enable}" translate>ES_SETTINGS.NOTIFICATIONS.ENABLE_CERT_RECEIVED</span>
      <div class="toggle toggle-royal">
        <input type="checkbox" ng-model="formData.notifications.certReceived" ng-disabled="!formData.enable">
        <div class="track">
          <div class="handle"></div>
        </div>
      </div>
    </label>


    <!-- Allow extension here -->
    <cs-extension-point name="common"></cs-extension-point>



  </ion-content>
</ion-view>
